<template>
  <!-- 图片列表展示组件,不包含分页 -->
  <div class="pictureList">
    <!-- 图片列表 -->
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :data-source="dataList"
      :pagination="false"
      :loading="loading"
    >
      <template #renderItem="{ item: picture }">
        <a-list-item style="padding: 0">
          <!-- 单张图片 -->
          <!--hoverable	鼠标移过时可浮起-->
          <a-card hoverable @click="doClickPicture(picture)">
            <template #cover>
              <!--注意，由于图片的宽高都是不同的，为了防止页面展示的图片”参差不齐“，给所有图片设置统一相同的高度，并使用object-fit: cover 优化图片的展示效果，不会受到挤压。-->
              <img
                style="height: 180px; object-fit: cover"
                :alt="picture.name"
                :src="picture?.host + picture?.thumbnailUrl"
              />
            </template>
            <a-card-meta :title="picture.name">
              <template #description>
                <a-flex>
                  <!--逻辑或运算符会在左侧操作数为任何假值（包括空字符串）时返回右侧的操作数-->
                  <a-tag color="green">
                    {{ picture.category || '默认' }}
                  </a-tag>
                  <a-tag v-for="tag in picture.tags" :key="tag">
                    {{ tag }}
                  </a-tag>
                </a-flex>
              </template>
            </a-card-meta>
            <template v-if="showOp" #actions>
              <search-outlined @click="(e) => doSearch(picture, e)" />
              <share-alt-outlined @click="(e) => doShare(picture, e)" />
              <edit-outlined v-if="canEdit" @click="(e) => doEdit(picture, e)" />
              <delete-outlined v-if="canDelete" @click="(e) => doDelete(picture, e)" />
            </template>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
    <ShareModal :open="open" :link="shareLink" title="分享" @update:open="handleModalOpen" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  DeleteOutlined,
  EditOutlined,
  SearchOutlined,
  ShareAltOutlined,
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { deletePictureUsingPost } from '@/api/pictureController.ts'
import ShareModal from '@/components/ShareModal.vue'

interface Props {
  dataList: API.PictureVO[]
  loading: boolean
  // 控制是否显示操作按钮,例如:主页就不需要显示操作按钮
  showOp?: boolean
  // 当图片列表发生改变时，需要重新加载图片列表
  onReload?: () => void
  // 是否可以编辑图片
  canEdit: boolean
  // 是否可以删除图片
  canDelete: boolean
}

// 使用 defineProps 定义组件接收的 prop 类型，并通过 withDefaults 为这些 props 设置默认值。
const props = withDefaults(defineProps<Props>(), {
  // 如果父组件没有传递 dataList prop，则使用 () => [] 提供一个空数组作为默认值。
  // 注意这里使用箭头函数的原因是为了确保每次调用时都返回一个新的数组实例，避免所有组件实例共享同一个数组引用。
  dataList: () => [],

  // 如果父组件没有传递 loading prop，则使用 () => false 提供 false 作为默认值。
  // 同样地，使用箭头函数是为了确保返回的是一个新的布尔值，而不是引用相同的值。
  loading: () => false,
  showOp: () => false,
  canEdit: false,
  canDelete: false,
})

const router = useRouter()
// 点击图片跳转图片详情页
const doClickPicture = (picture: API.PictureVO) => {
  router.push({
    path: `/picture/${picture.id}`,
  })
}

// 编辑
const doEdit = (picture, e) => {
  e.stopPropagation() // 阻止事件冒泡,导致触发卡片的点击事件
  // 跳转到图片编辑页,注意要携带空间ID,否则无法获取到空间信息
  router.push({
    path: '/add_picture',
    query: {
      id: picture.id,
      spaceId: picture.spaceId,
    },
  })
}

// 删除
const doDelete = async (picture, e) => {
  e.stopPropagation() // 阻止事件冒泡,导致触发卡片的点击事件
  const id = picture.id
  if (!id) {
    return
  }
  const res = await deletePictureUsingPost({ id })
  if (res.code === 0) {
    message.success('删除成功')
    // 让外层刷新
    props?.onReload()
  } else {
    message.error('删除失败')
  }
}

// 搜索
const doSearch = (picture, e) => {
  e.stopPropagation() // 阻止事件冒泡,导致触发卡片的点击事件
  // window.open() 是 JavaScript 中的一个方法，用于打开一个新的浏览器窗口或标签页来加载指定的 URL
  window.open(`/search_picture?pictureId=${picture.id}`) // 跳转到图片搜索页
}

// 模态框是否可见
const open = ref(false)
// 模态框控制事件
const handleModalOpen = (value: boolean) => {
  open.value = value
}

// 分享弹窗引用
const shareModalRef = ref()
// 分享链接
const shareLink = ref<string>()

// 分享
const doShare = (picture: API.PictureVO, e: Event) => {
  e.stopPropagation()
  shareLink.value = `${window.location.protocol}//${window.location.host}/picture/${picture.id}`
  open.value = true
}
</script>

<style scoped></style>
